<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="certificateSpeciality" label="岗位证书专业" min-width="150" />
    <el-table-column prop="name" label="证书名称" min-width="120" />
    <el-table-column prop="certificateNo" label="证书编号" min-width="120" />
    <el-table-column prop="issueDate" label="发证日期" min-width="120" />
    <el-table-column prop="registerEndDate" label="有效期至" min-width="120" />
    <el-table-column prop="issuingAuthority" label="发证机关" min-width="120" />
    <el-table-column prop="holder" label="持有人" min-width="120" />
    <el-table-column prop="attachments" label="证书附件" min-width="220">
      <template #default="scope">
        <div v-for="item in scope.row.attachments" :key="item.attachmentId" class="singe-line">
          {{ item.attachmentName }}
        </div>
      </template>
    </el-table-column>
    <el-table-column v-if="optionType != 3" fixed="right" label="操作" width="120">
      <template #default>
        <el-button link type="primary" size="small" @click="handleDelet">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
const props = defineProps({
  tableData: {
    type: Array as PropType<any[]>,
    default: () => [],
  },
  optionType: {
    type: Number,
    default: 1,
  },
});
const { tableData, optionType } = toRefs(props);
const emit = defineEmits(["deleteRow"]);
function handleDelet(row: any, index: number) {
  emit("deleteRow", 3, index);
}
</script>

<style scoped>
.singe-line {
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  white-space: nowrap;
}
</style>
